<template>
  <div style="width: 100%; margin-left: 10px">
    <titleNav></titleNav>
    <div style="margin-top: 10px">
      订单号：<el-input
        v-model="pageName.repairId"
        type="text"
        placeholder="请输入订单号"
        style="width: 20%"
      ></el-input>
      &nbsp; 联系人：<el-input
        v-model="pageName.contactName"
        placeholder="请输入联系人"
        style="width: 20%"
      ></el-input>
      &nbsp; 受理人：<el-input
        v-model="pageName.acceptorName"
        placeholder="请输入订单号"
        style="width: 20%"
      ></el-input
      ><br />
      <div style="margin-top: 8px">
        选择时间范围：
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="到"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        &nbsp;
        <el-button @click="getList1">查询</el-button>
      </div>
    </div>
    <!-- 控制订单状态 -->

    <el-table
      :data="pagedTableData"
      :table-layout="tableLayout"
      border
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        v-for="item in headers"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        width="180"
      >
        <template #default="scope" v-if="item.label === '报修单号'">
          <el-button type="text" @click="subMitFlow(scope.row)">
            {{ scope.row.repairId }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column prop="repairStatus" label="订单状态" align="center">
        <template #default="scope">
          <span v-if="scope.row.repairStatus === 'CREATE'">未审核</span>
          <span v-else-if="scope.row.repairStatus === 'APPROVED'">通过</span>
          <span v-else-if="scope.row.repairStatus === 'REJECTED'">拒绝</span>
          <span v-else-if="scope.row.repairStatus === 'PENDING'">待受理</span>
          <span v-else-if="scope.row.repairStatus === 'REPAIR'">维修中</span>
          <span v-else-if="scope.row.repairStatus === 'CANCELLED'">撤销单</span>
          <span v-else-if="scope.row.repairStatus === 'INSPECT'">待验收</span>
          <span v-else-if="scope.row.repairStatus === 'EXCEPTION'">异常单</span>
          <span v-else-if="scope.row.repairStatus === 'COMPLETE'">已评价</span>
          <span v-else-if="scope.row.repairStatus === 'ACCEPTED'"
            >验收通过</span
          >
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template #default="scope">
          <div v-if="scope.row.repairStatus === 'INSPECT'">
            <el-button @click="evaSubmit(scope.row)">去验收</el-button>
          </div>
          <div v-if="scope.row.repairStatus === 'CREATE'">
            <el-button @click="cellOrder(scope.row)">撤销</el-button>
          </div>
          <div v-if="scope.row.repairStatus === 'EXCEPTION'">
            <el-button>查看异常原因</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      v-model:current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :size="pageName.pageSize"
      :total="tableData.length"
      layout="total,sizes, prev, pager, next"
    >
      <template v-slot:total>
        <span>总页数: {{ total }}</span>
      </template>
    </el-pagination>
    <el-dialog
      v-model="dialogVisible"
      title="订单状态"
      width="500"
      :before-close="handleClose"
    >
      <div style="height: 150px">
        <span>订单状态：</span>
        <el-select
          v-model="value"
          placeholder="Select"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="changeStatus"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="cellDiavissable" title="撤销订单">
      <div>您确定要撤销订单</div>
      <div style="color: cadetblue">{{ cellForm.id }}</div>
      <div>撤销后不可恢复哦！！</div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cellDiavissable = false">取消</el-button>
          <el-button type="primary" @click="surecellOrder"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="验收评价" v-model="evaDiavissable">
      <el-form :model="evaluationForm">
        <el-form-item label="是否通过">
          <el-select
            v-model="evaluationForm.repairStatus"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in evaluationOptions.repairStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="服务态度"
          v-show="evaluationForm.repairStatus == 'COMPLETE'"
        >
          <el-rate
            v-model="evaluationForm.evaluation.serviceAttitude"
            :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
            show-text
          />
        </el-form-item>
        <el-form-item
          label="技术能力"
          v-show="evaluationForm.repairStatus == 'COMPLETE'"
        >
          <el-rate
            v-model="evaluationForm.evaluation.technicalCapability"
            :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
            show-text
          />
        </el-form-item>
        <el-form-item
          label="响应速度"
          v-show="evaluationForm.repairStatus == 'COMPLETE'"
        >
          <el-rate
            v-model="evaluationForm.evaluation.responseSpeed"
            :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
            show-text
          />
        </el-form-item>
        <el-form-item
          label="请输入您宝贵的评价"
          v-show="evaluationForm.repairStatus == 'COMPLETE'"
        >
          <el-input
            type="textarea"
            v-model="evaluationForm.evaluation.evaluateContent"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="evaDiavissable = false">取消</el-button>
        <el-button type="primary" @click="sureSubmitEva"> 确定 </el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="flowDiavissable">
      <el-card>
        <el-descriptions title="报修详情">
          <el-descriptions-item label="订单编号">{{
            showFlowForm.repairId
          }}</el-descriptions-item>
          <el-descriptions-item label="语音"
            ><el-button>查看录音</el-button></el-descriptions-item
          >
          <el-descriptions-item label="图片"
            ><el-button>查看图片</el-button></el-descriptions-item
          >
          <el-descriptions-item label="描述">
            {{ showFlowForm.dispatchNote }}
          </el-descriptions-item>
          <el-descriptions-item label="协同人员">{{
            showFlowForm.collaborator
          }}</el-descriptions-item>
          <el-descriptions-item label="受理人员"></el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card style="margin-top: 20px">
        <template #header>
          <div>
            <span>流转信息</span>
          </div>
        </template>
        <el-table :data="showFlowTable" border>
          <el-table-column
            prop="flowContent"
            label="报修单状态"
          ></el-table-column>
          <el-table-column prop="flowTime" label="操作时间"></el-table-column>
          <el-table-column
            prop="handlingPerson"
            label="操作人"
          ></el-table-column>
          <el-table-column></el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  getReceiveOrder,
  getPersonList,
  cancelled,
  evaluation,
  flowList
} from '@/api/repairList'

import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useTitleStore } from '@/stores/titleNav'
import { ElMessage } from 'element-plus'

// import { ElMessage, valueEquals } from 'element-plus'
const tableLayout = ref('fixed')
const userStore = useUserStore()
const titleStore = useTitleStore()
const tableData = ref([])
const value1 = ref()
const radio1 = ref('CREATE')
const index = ref({
  index: '/ordercenter/myOrder',
  title: '我的订单'
})
// const equipname = ref('')s
const pageName = ref({
  pageNum: 1,
  pageSize: 10,
  sort: 1,
  repairId: '',
  contactName: '',
  acceptorName: '',
  startTime: '',
  endTime: ''
})
const currentPage = ref(1)
const pageSize = ref(10)
const dialogVisible = ref(false)

const pagedTableData = computed(() => {
  return tableData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  )
})

const handlePageChange = (newPage) => {
  currentPage.value = newPage
  // 可以在这里添加其他逻辑
}

// 派单处理
const headers = ref([])
// 获取个人订单
const getList = async () => {
  const res = await getPersonList(pageName.value)
  console.log(res)
  const res1 = await getReceiveOrder()
  console.log(userStore.userInfo, res1)
  if (userStore.userInfo.info.roles[0].roleName == '超级管理员') {
    tableData.value = res.data.pageInfo.list
    headers.value = res.data.header
    console.log(headers.value)
  } else {
    tableData.value = res1.data.list.filter(
      (item) => item.repairStatus === radio1.value
    )
    tableData.value = tableData.value.map((item) => {
      // 提取equipList数组中的name值
      const names = item.equipmentList.map((device) => device.name).join(', ')
      // 返回一个新对象，包含拼接后的设备名称和其他属性
      return { ...item, equipmentList: names }
    })
  }
}
const cellDiavissable = ref(false)
const cellForm = ref({
  id: ''
})
const cellOrder = (row) => {
  cellForm.value.id = row.id
  cellDiavissable.value = true
}
// 撤销订单
const surecellOrder = async () => {
  const res = await cancelled(cellForm.value)
  console.log(res)
  if (res.code == 200) {
    ElMessage({
      message: '撤销成功',
      type: 'success'
    })
    cellDiavissable.value = false
  } else {
    ElMessage({
      message: '未知错误，请联系管理员',
      type: 'danger'
    })
  }
}
// 验收评价
const evaDiavissable = ref(false)
const evaluationOptions = ref({
  repairStatus: [
    { value: 'COMPLETE', label: '通过' },
    { value: 'REPAIR', label: '不通过' }
  ],
  Evaluatiom: {
    serviceAttitude: [1, 2, 3, 4, 5], // 服务态度
    technicalCapability: [1, 2, 3, 4, 5], // 技术能力
    responseSpeed: [1, 2, 3, 4, 5] // 响应速度
  }
})
const evaluationForm = ref({
  id: '',
  repairStatus: '', // 审核通过  REPAIR不通过
  evaluation: {
    serviceAttitude: null, // 服务态度
    technicalCapability: null, // 技术能力
    responseSpeed: null, // 响应速度
    evaluateContent: '' // 评价内容
  }
})
const evaSubmit = (row) => {
  evaluationForm.value.id = row.id
  evaDiavissable.value = true
}
const sureSubmitEva = async () => {
  const res = await evaluation(evaluationForm.value)
  if (res.code == 200) {
    ElMessage({
      message: '评价成功,非常感谢您的评价',
      type: 'success'
    })
    evaDiavissable.value = false
  } else {
    ElMessage({
      message: '未知错误，请联系管理员',
      type: 'error'
    })
  }
}
// 查找流水
const flowDiavissable = ref(false)
const flowForm = ref({
  repairOrderId: ''
})
const showFlowTable = ref()
const showFlowForm = ref({})

const subMitFlow = async (row) => {
  flowForm.value.repairOrderId = row.id
  showFlowForm.value = row
  const res = await flowList(flowForm.value)
  showFlowTable.value = res.data
  flowDiavissable.value = true
}

const value = ref('')

onMounted(() => {
  titleStore.updataTitInfo(index)
  getList()
})
</script>
<style scoped lang="less"></style>
